import React from 'react';
import {
  Form,
  Input,
  Tooltip,
  Icon,
  Cascader,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
  AutoComplete,
  Radio,
  Table,
  Popconfirm,
} from 'antd';
import styles from './index.less';
import { connect } from 'dva';
import router from 'umi/router';
import Global from '@/components/Global';
const { Option } = Select;
const { Group } = Radio;
const creator = (type, payload) => ({ type, payload });

class CreateTitle extends React.Component {
  state = {};

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(creator('title/getTitles'));
  }
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { dispatch } = this.props;
        values.title = values.title.trim();
        values.id = new Date().getTime();
        dispatch(creator('title/createTitle', values)).then(res => {
          if (res.httpStatus === 200) {
            dispatch(creator('title/getTitles'));
          }
        });
      }
    });
  };
  confirm = (_id) => {
    const { dispatch } = this.props;
    dispatch(creator('title/delTitle', _id)).then(res => {
      if (res.httpStatus === 200) {
        dispatch(creator('title/getTitles'));
      }
    });
  };
  render() {
    const { title } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { titles } = title;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    const columns = [
      { title: '标题', dataIndex: 'title' },
      { title: 'id', dataIndex: 'id' },
      {
        title: '操作',
        render: (text, record) => (
          <Popconfirm
            title="确认删除吗?"
            onConfirm={this.confirm.bind(this, record._id)}
            // onCancel={this.cancel}
            okText="确定"
            cancelText="取消"
          >
            <a href="#">
              删除
            </a>
          </Popconfirm>
        ),
      },
    ];
    return (
      <Global>
        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
          <Form.Item label="文章标题">
            {getFieldDecorator('title', {
              rules: [
                {
                  required: true,
                  message: '请输入文章标题!',
                },
              ],
            })(<Input />)}
          </Form.Item>
          <Row style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <Button type="primary" htmlType="submit">
              创建
            </Button>
          </Row>
        </Form>
        <Table
          pagination={{
            total: titles.length,
            showTotal: total => `共${total}条数据`,
            showSizeChanger: true,
            size: 'small',
            pageSizeOptions: ['10', '100', '1000'],
          }}
          style={{ marginTop: 10 }}
          rowKey="_id"
          dataSource={titles}
          columns={columns}
        />
      </Global>
    );
  }
}
//   export default CreateTitle

const WrappedCreateTitle = Form.create({ name: 'register' })(CreateTitle);

export default connect(({ title }) => ({ title }))(WrappedCreateTitle);
